<template>
  <a-modal
    title="商品"
    :width="700"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-table
      :rowKey="record => record.name"
      :columns="columns"
      :dataSource="data"
      :rowSelection="{selectedRowKeys: selectedRowKeys,type:'radio', onChange: OnSelect}"
      bordered
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
    </a-table>
  </a-modal>
</template>

<script>
export default {
  name: 'Item',
  data () {
    return {
      selectedRowKeys: [],
      data: [{
        no: 'Item01',
        name: '商品1'
      },
      {
        no: 'Item02',
        name: '商品2'
      },
      {
        no: 'Item03',
        name: '商品3'
      }],
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '商品编号',
          dataIndex: 'no'
        },
        {
          title: '商品名称',
          dataIndex: 'name'
        }
      ],
      visible: false
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      const returnData = { item: null }
      for (let i = 0; i < this.data.length; i++) {
        if (this.selectedRowKeys[0] === this.data[i].name) {
          returnData.item = this.data[i].name
          break
        }
      }
      this.$emit('setSelectedValue', returnData)
      this.handleCancel()
    },
    OnSelect (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style scoped>

</style>
